<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的订单 - {:config('web.WEB_TIT')}</title>
		{include file="member/public"}
		<link rel="stylesheet" type="text/css" href="__HOME__/member_style/css/swiper-3.4.2.min.css" />
		<script src="__HOME__/member_style/js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body >
		  <header data-am-widget="header" class="am-header am-header-default jz" >
		      <div class="am-header-left am-header-nav">
		         <a href="javascript:history.back()" class="">
					<i class="am-icon-chevron-left" ></i>
				</a>
		      </div>
		      <h1 class="am-header-title">
		          <a href="#title-link" >订单列表</a>
		      </h1>
            </header>
           
           <div class="tabs" style="margin-top: 0.2rem;">
			<!--选项卡标题-->
			<div class="tab_title">
				<a href="#" class="active">全部</a>
				<a href="#">已付款</a>
				<a href="#">已结算</a>
				<a href="#">已失效</a>
			</div>
			<!--选项卡底部line-->
			<div class="tab_line">
				<span class="active_line"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>

		<!--选项卡容器-->
		<div id="tabs-container" class="swiper-container">
			<div class="swiper-wrapper">
				<!--全部内容-->
				<div class="swiper-slide">
					<div class="content-slide">
						{foreach $TaoorderList as $oK=>$oV}
						<div class="all_list">
							<div class="ali_top">
								<img src="__HOME__/member_style/images/icon2.png"/>
								<li class="ali_rig">
									<p class="p">{$oV.item_title}</p>
									<span style="color: #CCCCCC;">所属店铺：{$oV.seller_shop_title}</span>
									<span class="{$oV.class_status}">{$oV.tk_status}</span>
									<p class="pp"><span>服务费比率 <em>{$oV.tkAlimmShareRate}</em></span><span>付款金额  <em>¥{$oV.alipay_total_price}</em></span></p>
								</li>
							</div>
							<div class="ali_bottom">
								<span>{$oV.establish_time} 创建</span>
								<span>付款预估收入 <em>¥0.28</em></span>
							</div>
					 	</div>
						{/foreach}
					</div>
				</div>
				<!--已付款内容-->
				<div class="swiper-slide">
					<div class="content-slide">
						<div class="all_list">
					 	<div class="ali_top">
					 		<img src="__HOME__/member_style/images/icon2.png"/>
					 		<li class="ali_rig">
					 			<p class="p">直奔活草面巾纸餐厅纸手指卫生纸作业纸什么纸都有</p>
					 			<span style="color: #CCCCCC;">所属店铺：沪指旗舰店</span>
					 			<span class="al_status">已付款</span>
					 			<p class="pp"><span>技术服务费比率 <em>10.00%</em></span><span>付款金额  <em>¥14.10</em></span></p>
					 		</li>
					 	</div>
					 	<div class="ali_bottom">
					 		<span>2018-09-11 23:09:16 创建</span>
					 		<span>付款预估收入 <em>¥0.28</em></span>
					 	</div>
					 </div>
					</div>
			</div>
			<!--已结算内容-->
				<div class="swiper-slide">
					<div class="content-slide ">
						 <div class="all_list">
					 	<div class="ali_top">
					 		<img src="__HOME__/member_style/images/icon2.png"/>
					 		<li class="ali_rig">
					 			<p class="p">直奔活草面巾纸餐厅纸手指卫生纸作业纸什么纸都有</p>
					 			<span style="color: #CCCCCC;">所属店铺：沪指旗舰店</span>
					 			<span class="al_status1">已结算</span>
					 			<p class="pp"><span>技术服务费比率 <em>10.00%</em></span><span>付款金额  <em>¥14.10</em></span></p>
					 		</li>
					 	</div>
					 	<div class="ali_bottom">
					 		<span>2018-09-11 23:09:16 创建</span>
					 		<span>付款预估收入 <em>¥0.28</em></span>
					 	</div>
					 </div>
					</div>
				</div>
				<!--已失效内容-->
				<div class="swiper-slide">
					<div class="content-slide ">
						<div class="all_list">
					 	<div class="ali_top">
					 		<img src="__HOME__/member_style/images/icon2.png"/>
					 		<li class="ali_rig">
					 			<p class="p">直奔活草面巾纸餐厅纸手指卫生纸作业纸什么纸都有</p>
					 			<span style="color: #CCCCCC;">所属店铺：沪指旗舰店</span>
					 			<span class="al_status3">已失效</span>
					 			<p class="pp"><span>技术服务费比率 <em>10.00%</em></span><span>付款金额  <em>¥14.10</em></span></p>
					 		</li>
					 	</div>
					 	<div class="ali_bottom">
					 		<span>2018-09-11 23:09:16 创建</span>
					 		<span>付款预估收入 <em>¥0.28</em></span>
					 	</div>
					 </div>
					</div>
				</div>
			</div>
		</div>
        
	</body>
	<script type="text/javascript">
		window.onload = function() {
  var tabsSwiper = new Swiper('#tabs-container', {
					speed: 500,
					autoHeight: true,
					onSlideChangeStart: function(swiper) {
						$(".tabs .active").removeClass('active')
						$(".tabs .active_line").removeClass('active_line')
						$(".tabs a").eq(swiper.activeIndex).addClass('active')
						$(".tabs span").eq(swiper.activeIndex).addClass('active_line')
					}
				})
				$(".tabs a").on('touchstart click', function(e) {
					e.preventDefault()
					$(".tabs .active").removeClass('active')
					$(".tabs .active_line").removeClass('active_line')
					$(this).addClass('active')
					$(this).addClass('active_line')
					tabsSwiper.slideTo($(this).index())
				})

}
	</script>
</html>
